<template>
  <div class="main">
	  <div class="main-box animate__animated animate__fadeInUp">
		  <div class="title animate__animated animate__fadeInRight">《青春校园》</div>
		  <div class="imgContain">
			  <img src="../../../public/imgContext/02-1.png" class="animate__animated animate__fadeInLeft">
			  <img src="../../../public/imgContext/02-2.png" class="animate__animated animate__fadeInRight">
		  </div>
			<div class="content animate__animated animate__fadeInLeft">
				四年前看着师兄师姐们毕业<br>
				也憧憬着<br>
				自己在毕业时<br>
				又会是什么样子<br>
				时间来到了四年后<br>
				经历了各种的第一次<br>
				你<br>
				也第一次大学毕业了<br>
				你也第一次拍上了大学毕业照
			</div>
	  </div>
  </div>
</template>

<script>
</script>
<style scoped>
.main{
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 2em;
}
.main-box{
    line-height: 1.875rem;
    font-family:"Times New Roman",Georgia,Serif;
    letter-spacing: 0.1em;
    width: 80vw;
    color: white;    
	font-size: 1rem;
    text-align: center;
    padding: 0.625rem;
    border: 0.125rem solid white;
} 
.main-box > .imgContain {
    width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin-bottom: 1.5em;
}
.main-box > .imgContain > img{
	width: 45%;
	animation-delay: 0.5s;
}
.main-box > .title{
    margin-bottom: 1.25rem;
    font-size: 1.875rem;
    font-weight: bold;
	animation-delay: 0.5s;
}
.main-box > .content{
	animation-delay: 0.5s;
}
</style>
